/**
* @file 确认订单
* @author 张超
* @created 2023/7/04 08:00
* @updated 2023/7/04 18:00
*/
<template>
	<view class="config">
		<u-navbar :border-bottom="false" title-size="35" title="确认订单"></u-navbar>
		<!-- 地址 -->
		<view class="config-addres" @click="goAddress">
			<view class="mor" v-if="defaultAdd!=null">
				<view class="">
					<text>默认</text>
					<text>{{defaultAdd.address}}</text>
				</view>
				<text>{{defaultAdd.province_name}}{{defaultAdd.city_name}}{{defaultAdd.area_name}}</text>
				<text>{{defaultAdd.consignee}} {{defaultAdd.phone}}</text>
			</view>
			<view style="font-size:40rpx;margin-top:30rpx;margin-left:30rpx;" v-else>请添加地址</view>
			<u-icon v-if="defaultAdd!=null" name="arrow-right" size="40" color="#a4a4a4"></u-icon>
		</view>
		<view class="menu"></view>
		<!-- 商品信息 -->
		<view class="config-info">
			<view class="info-one">
				<image :src="goodReadyDa.image_text"></image>
				<view>
					<text>{{goodReadyDa.title}}</text>
				</view>
				<view class="">×{{goodReadyDa.number}}</view>
			</view>
			<view class="info-shifk">
				<text>实付款</text>
				<!-- each_price不为0，则渲染该字段无需渲染group_price，格式为150.00企业产权+150.00金币 -->
				<view class="swiper-mouay" v-if="goodReadyDa.each_price=='0.00'">
					<text>{{goodReadyDa.group_price|xiaos}}</text>
					<text>健康值</text>
				</view>
				<view class="swiper-mouay" v-else>
					<text>{{goodReadyDa.each_price|xiaos}}</text>
					<text>企业产权+</text>
					<text>{{goodReadyDa.each_price|xiaos}}</text>
					<text>金币</text>
				</view>
			</view>
			<view class="info-shifk border-none">
				<text>运费</text>
				<text>{{goodReadyDa.express_money}}</text>
			</view>
		</view>
		<view class="return-policy">
		  <view class="policy-header">
			<u-icon name="error-circle" color="#FF9900" size="36"></u-icon>
			<text>退换货政策</text>
		  </view>
		  <view class="policy-content">
			汇福源销售的产品目前都属于私人个性化订制，根据每个人不同的身体健康体征，针对性搭配相关产品设定个性化健康改善方案。
			所涉及的每款产品都是沿用中医古方经现代工艺低温萃取而生产开发出的药食同源特殊膳食类的功能性预包装食品。
			所有产品属于预包装食品级别，一旦售出只要不涉及产品本身质量问题基于安全考虑是不予退货的，即便客户有退换货的请求，
			也随时可在当地所辖工作站经工作人员协调解决退换货事宜。
		  </view>
		</view>
		<!-- <view style="height:220rpx;"></view> -->
		<view class="config-btn">
			<view class="">
				<text>合计：</text>
				<!-- each_price不为0，则渲染该字段无需渲染group_price，格式为150.00企业产权+150.00金币 -->
				<view class="swiper-mouay" v-if="goodReadyDa.each_price==0">
					<text>{{goodReadyDa.group_price|xiaos}}</text>
					<text>健康值</text>
				</view>
				<view class="swiper-mouay" v-else>
					<text>{{goodReadyDa.each_price|xiaos}}</text>
					<text>企业产权+</text>
					<text>{{goodReadyDa.each_price|xiaos}}</text>
					<text>金币</text>
				</view>
			</view>
			<view class="btn" @click="config">提交订单</view>
		</view>
		<u-popup v-model="showPopup" mode="center" width="600rpx" height="360rpx" border-radius="20">
			<view class="pop">
				<view class="pop-title" @click="showPopup=false">
					<u-icon name="close" size="40"></u-icon>
					<text>请绑定上级编号</text>
				</view>
				<view class="swipernew-mouay">
					<input type="text" v-model="inputValue" placeholder="请输入上级编号" />
				</view>
				<view class="popnew-btn">
					<view class="" @click="showPopup=false">取消</view>
					<view class="" @click="popupEv">确认</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show" mode="center" width="600rpx" height="560rpx" border-radius="20">
			<view class="pop">
				<view class="pop-title" @click="close">
					<u-icon name="close" size="40"></u-icon>
					<text>请输入支付密码</text>
				</view>
				<view class="title-des">{{good.goodsname}}</view>
				<!-- each_price不为0，则渲染该字段无需渲染group_price，格式为150.00企业产权+150.00金币 -->
				<view class="swiper-mouay" v-if="goodReadyDa.each_price==0">
					<text>{{goodReadyDa.group_price|xiaos}}</text>
					<!-- <text>健康值</text> -->
				</view>
				<view class="swiper-mouay" v-else>
					<text>{{goodReadyDa.each_price|xiaos}}</text>
					<text>企业产权+</text>
					<text>{{goodReadyDa.each_price|xiaos}}</text>
					<text>金币</text>
				</view>
				<view class="pop-number">
					<view class="">
						<text>支付方式</text>
						<text v-if="each_price==0">健康值</text>
					</view>
					<u-message-input mode="box" :maxlength="6" font-size="35" width="60"
						@finish="finish"></u-message-input>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="shopShow" :show-cancel-button="true" :content="shopConten" @confirm="shopConfirm"></u-modal>
	</view>
</template>

<script>
	import {
		defaults,
		goodReady,
		checkOrders,
		userPass,
		readyPass,
		commitPass
	} from '@/network/api.js'
	import {
		getUserinfo,
		onlybind
	} from '@/network/loginAndMy.js'
	export default {
		data() {
			return {
				// 是否显示支付弹框
				show: false,
				defaultAdd: {},
				// 详情页数据
				detail: {},
				// 预订单数据
				goodReadyDa: {},
				good: {},
				spec: {},
				// 判断开团/参团/未入金，1开团，2参团，空未入金
				type: '',
				// 判断传id/goods_id,1id/2goods_id
				types: '',
				// 是否兑换健康值弹框
				shopShow: false,
				shopConten: '确认兑换健康值？',
				// 判断是否入金，each_price==0入金，否则未入金
				each_price: '',
				// 密码
				payword: '',
				// upid等于0提示绑定上级
				upid: '',
				inputValue: '',
				showPopup:false
			}
		},
		onLoad(option) {
			this.detail = JSON.parse(option.data)
			this.type = this.detail.type
			this.types = this.detail.typee
			console.log(this.detail, '测试')
			// 生成预订单
			this.goodReadyRe()
			// 获取默认地址
			this.defaultsRe()
			// 获取用户信息
			this.getUserinfoRe()
		},
		onShow() {
			// 生成预订单
			this.goodReadyRe()
			// 获取默认地址
			this.defaultsRe()
			// 获取用户信息
			this.getUserinfoRe()
		},
		filters: {
			// 过滤小数点后面数据
			xiaos(num) {
				return Math.trunc(num)
			},
		},
		methods: {
			// 获取用户信息
			getUserinfoRe() {
				getUserinfo().then(res => {
					if (res.code == 1) {
						this.upid = res.data.upid
						this.payword = res.data.payword
					}
				})
			},
			// 获取默认地址
			defaultsRe() {
				defaults().then(res => {
					this.defaultAdd = res.data
				})
			},
			// 生成预订单
			goodReadyRe() {
				let data = {
					goodid: this.types == 1 ? this.detail.market.id : this.detail.market.goods_id
				}

				console.log(data, '预订单')
				// 抢买预订单
				readyPass(data).then(res => {
					this.goodReadyDa = res.data
					this.each_price = res.data.each_price
				})
			},
			// 检查库存
			checkOrderRe() {
				let data = {
					goodid: this.goodReadyDa.id,
					number: this.goodReadyDa.number
				}
				checkOrders(data).then(res => {
					if (res.code == 1 && this.each_price != 0) { // 未入金
						this.commitRe()
					} else if (res.code == 1 && this.each_price == 0) { //已入金
						this.commitPassRe()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000,
						});
					}
				})
			},
			// 入金
			commitRe() {
				let data = {
					goodid: this.goodReadyDa.id,
					addressid: this.defaultAdd.id
				}
				userPass(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '已入金',
							icon: "none",
							duration: 2000,
						});
						setTimeout(()=>{
							uni.switchTab({
								url: '/pages/main/my/my'
							})
						},1000)
					}
				})
			},
			// 抢购订单提交
			commitPassRe() {
				let data = {
					goodid: this.goodReadyDa.id,
					//判断参团/开团，2参团传，1开团不传
					team_sn: this.type == 1 ? '' : this.detail.market.team_sn,
					addressid: this.defaultAdd.id
				}
				commitPass(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '提交成功',
							icon: "none",
							duration: 2000,
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/subpackage/shop/wopt?current='+1
							})
						},800)
					}
				})
			},
			// 选择地址
			goAddress() {
				uni.navigateTo({
					url: '/pages/subpackage/my/address?type=' + 1
				})
			},
			// 确认兑换健康值
			shopConfirm() {
				this.show = true
			},
			popupEv() {
				if (this.inputValue == '') {
					uni.showToast({
						title: "请输入上级编号",
						icon: "none",
						duration: 2000,
					});
				} else {
					this.onlybindRe()
				}
			},
			// 绑定上下级
			onlybindRe(){
				let data={
					unumber:this.inputValue
				}
				onlybind(data).then(res=>{
					if(res.code==1){
						this.showPopup=false
						this.show = true
					}
				})
			},
			// 提交订单
			config() {
				if (this.defaultAdd == null) {
					uni.showToast({
						title: "请添加地址",
						icon: "none",
						duration: 2000,
					});
				} else {
					if (this.upid == 0) {
						this.showPopup=true
					} else {
						this.show = true
					}
				}
			},
			// 关闭支付弹框
			close() {
				this.show = false
			},
			// 输入完密码触发
			finish(value) {
				if (this.payword == '') {
					uni.showToast({
						title: "请设置支付密码",
						icon: "none",
						duration: 2000,
					});
				} else if (this.payword == value) {
					this.show = false
					this.checkOrderRe()
				} else {
					uni.showToast({
						title: "密码错误",
						icon: "none",
						duration: 2000,
					});
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style lang="scss">
	.config {
		padding: 20rpx 30rpx;
		background-color: #F3F3F3;

		.config-addres {
			display: flex;
			height: 222rpx;
			padding: 46rpx 20rpx 0 20rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #fff;

			.mor {
				>view:nth-child(1) {
					display: flex;
					align-items: center;

					>text:nth-child(1) {
						display: block;
						width: 48rpx;
						height: 25rpx;
						text-align: center;
						line-height: 25rpx;
						font-size: 20rpx;
						color: #fff;
						margin-right: 20rpx;
						background: #da3e25;
						border-radius: 1.5px;
					}

					>text:nth-child(2) {
						display: block;
						width: 500rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-family: PingFang SC, PingFang SC-Medium;
					}
				}

				>text:nth-child(2) {
					display: block;
					width: 600rpx;
					margin-top: 20rpx;
					font-size: 36rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: PingFang SC, PingFang SC-Medium;

				}

				>text:nth-child(3) {
					display: block;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #333333;
					font-family: PingFang SC, PingFang SC-Medium;
				}
			}

			.u-icon {
				margin-left: auto;
			}
		}

		.menu {
			height: 5px;
			background: repeating-linear-gradient(135deg,
					#30e8bf 25%,
					#8ca8f7 0,
					#8ca8f7 50%,
					#30e8bf 0,
					#30e8bf 75%,
					#8ca8f7 0);
			background-size: 30px 30px;
			animation: roll 1s linear infinite;
		}

		@keyframes roll {
			from {
				background-position-x: 0;
			}

			to {
				background-position-x: 30px;
			}
		}

		// 商品信息
		.config-info {
			// height: calc(100vh - 650rpx);
			overflow-y: scroll;
			margin-top: 20rpx;
			padding: 40rpx 24rpx 20rpx 24rpx;
			border-radius: 20rpx;
			background-color: #fff;
			// border:1rpx solid red;

			.info-one {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;

				>image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}

				>view:nth-child(2) {
					width: 400rpx;

					>text:nth-child(1) {
						display: block;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2; //行数
						-webkit-box-orient: vertical;
						font-family: PingFang SC, PingFang SC-Bold;
					}

					>text:nth-child(2) {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						color: #666666;
					}

				}
			}

			.info-shifk {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 0 30rpx 0;
				margin-top: 30rpx;
				border-bottom: 1rpx solid #F5F5F5;

				>text {
					font-size: 30rpx;
					color: #666666;
				}

				.swiper-mouay {
					color: #E80000;

					>text:nth-child(odd) {
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: bold;
					}

					>text:nth-child(even) {
						font-size: 20rpx;
					}
				}
			}

			.border-none {
				border: none
			}
		}

		// 提交按钮
		.config-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 150rpx;
			padding: 30rpx;
			background-color: #fff;

			>view:nth-child(1) {
				>text:nth-child(1) {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Bold;
				}

				.swiper-mouay {
					color: #E80000;

					>text:nth-child(odd) {
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: bold;
					}

					>text:nth-child(even) {
						font-size: 30rpx;
					}
				}
			}

			.btn {
				width: 220rpx;
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;
				font-size: 26rpx;
				color: #fff;
				background: #d22119;
				border-radius: 18px;
			}

			.btn:active {
				background-color: #ea436e;
			}
		}

		// 弹框
		.pop {
			padding: 57rpx 46rpx;

			.pop-title {
				display: flex;

				.u-icon {
					position: absolute;
				}

				>text {
					margin: 0 auto;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
				}
			}

			.title-des {
				text-align: center;
				margin: 50rpx 0 34rpx 0;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}

			.swiper-mouay {
				text-align: center;
				padding-bottom: 46rpx;
				color: #E80000;
				border-bottom: 1rpx solid #EEEEEE;

				>text:nth-child(odd) {
					font-size: 48rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: bold;
				}

				>text:nth-child(even) {
					font-size: 30rpx;
				}
			}

			.pop-number {
				>view:nth-child(1) {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;

					>text {
						display: block;
					}
				}
			}
			
			.swipernew-mouay{
				border-bottom:1rpx solid #c9d6df;
				margin: 30rpx 0;
				padding: 20rpx 0;
			}
			
			.popnew-btn{
				display: flex;
				justify-content: space-between;
				>view{
					width: 40%;
					height: 80rpx;
					color: #000;
					border-radius: 20rpx;
					text-align: center;
					line-height: 80rpx;
					border:1rpx solid #252a34;
				}
				>view:active{
					background-color: #eaeaea;
				}
			}
		}
	}
.return-policy {
	  background-color: #fff;
	  border-radius: 10rpx;
	  padding: 25rpx;
	  margin: 30rpx 0;
	  font-size: 26rpx;
	  color: #555;
	  line-height: 1.6;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.policy-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 15rpx;
	  font-weight: bold;
	  color: #e74c3c;
	}
	
	.policy-header text {
	  margin-left: 10rpx;
	  font-size: 28rpx;
	}
	
	.policy-content {
	  background-color: #f9f9f9;
	  padding: 20rpx;
	  border-radius: 8rpx;
	  border-left: 4rpx solid #FF9900;
	}
</style>